<!DOCTYPE html>
<html lang="en" xmlns:layout="http://www.w3.org/1999/xhtml"
      layout:decorate="~{admin/adminJs}" xmlns:v-on="http://www.w3.org/1999/xhtml">

<body layout:fragment="content">
    <!--搜索栏-->
    <div id="treeMenu" style="margin: 20px 0 0 0;">
        <el-tree
                :data="roles"
                show-checkbox
                node-key="id"
                ref="treeMenu"
                :default-expanded-keys="[]"
                :default-checked-keys="checkedKeys"
                :props="defaultProps"
                @node-click="nodeClick"
                style="width: 250px;margin-left: 70px;">
        </el-tree>
        <el-row style="margin-top: 30px;text-align: center">
            <el-button size="mini" type="primary" @click="onSubmit" round>保存</el-button>
            <el-button size="mini" type="warning" @click="closeParentDialog(false)" round>离开</el-button>
        </el-row>
    </div>


    <script>

        var userId=RequestUtils.get('userId');

        var vm=  new Vue({
            el: '#treeMenu',
            data:function () {
                var data=ajaxPost("/admin/user/role/listByUserId",{userId:userId});
                defaultProps= {
                    children: 'children',
                    label: 'name'
                };
                var roles=data.roles;
                return {defaultProps:defaultProps,roles:roles,checkedKeys:data.checkedKeys,userId:userId};
            },
            methods: {
                nodeClick:function (data) {
                    var checkedKeys=this.$refs.treeMenu.getCheckedKeys();
                    for(var i=0;i<checkedKeys.length;i++){
                        if(data.id==checkedKeys[i]){
                            this.$refs.treeMenu.setChecked(data.id,false);
                            return ;
                        }
                    }
                    this.$refs.treeMenu.setChecked(data.id,true);
                },closeParentDialog:function(isRefresh){
                    window.parent.closeDialog(isRefresh);
                },onSubmit:function () {
                    var checkedKeys=this.$refs.treeMenu.getCheckedKeys();
                    EasyuiUtils.confirmSave("/admin/user/user/userRoleSave",{
                        userId:this.userId,
                        roleIds:checkedKeys
                    },function () {
                        vm.closeParentDialog(false);
                    });
                }
            }
        });


    </script>
</body>

</html>